<template>
    <div class="mobileScreen">
        <a-spin class="mobileScreen-content" :spinning="loading">
            <a-row :gutter="[0, 12]">
                <a-col :span="24" v-for="(item, index) in list" :key="item.value + index">
                    <ScreenItem :title="item.label" :item="item" :type="item.type" :list="listData[item.value]"
                        v-if="listData[item.value]" :deptid="id">
                    </ScreenItem>
                </a-col>
            </a-row>
        </a-spin>
    </div>
</template>

<script>
import ScreenItem from './components/ScreenItem.vue'
import moment from "moment";
import { backDataFormat } from './js/js.js';
export default {
    name: 'mobileScreen',
    components: {
        ScreenItem,
    },
    data() {
        return {
            id: '',
            loading: false,
            list: [
                {
                    label: '总览',
                    value: 'companyFlow',
                    type: 'box',
                },
                {
                    label: '本月每日作业量',
                    value: 'companyFlowByDay',
                    type: 'bar',
                    setting: {
                        xAxisSetting: {
                            fontSize: '8',
                            color: '#000000',
                        },
                        yAxisSetting: {
                            fontSize: '8',
                            color: '#000000',
                        },
                        grid: {
                            bottom: '5%',
                            top: '7%',
                            left: '2%',
                            right: '2%',
                        },
                        colorStops:['#0678FF','#0678FF00'],
                        isShow: true,
                    }
                },
                {
                    label: '本年每月作业量',
                    value: 'monthflowByYear',
                    type: 'bar',
                    setting: {
                        xAxisSetting: {
                            fontSize: '8',
                            color: '#000000',
                        },
                        yAxisSetting: {
                            fontSize: '8',
                            color: '#000000',
                        },
                        grid: {
                            bottom: '5%',
                            top: '7%',
                            left: '2%',
                            right: '2%',
                        },
                        colorStops:['#19DA9D','#19DA9D00'],
                        isShow: true,
                    }
                },
                {

                    label: '未闭环统计',
                    value: 'companyMaxFlow',
                    type: 'table',
                },
                {

                    label: '实时数据',
                    value: 'companyMaxFlow',
                    type: 'list',
                },
            ],
            formData: {
                deptid: '',
                date: '',
            },
            listData: {
            },
            name: '',
        }
    },
    mounted() {
        let routeInfo = this.$route;
        let id = routeInfo.query.id;
        let name = routeInfo.query.name;
        this.id = id;
        this.name = name;
        this.changeName(this.name)
        this.formData = {
            ...this.formData,
            deptid: id,
            date: moment().format('YYYY-MM'),
        }
        this.getInfoData(this.formData);

    },
    methods: {
        getInfoData(aPamars) {
            let params = {
                ...this.formData,
                ...aPamars,
            }
            this.loading = true;
            this.getAxios(this.$getAppBoard, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.listData = {
                            ...this.listData,
                            ...backDataFormat(res.data),
                        }
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        changeName(e) {
            if (document) {
                document.title = e || `“智隼”安全生产风险管控系统`;
            }
        }
    },
    destroyed() {
        this.changeName();
    }
}
</script>

<style lang="less" scoped>
.mobileScreen {
    height: 100vh;
    width: 100vw;
    background-color: #F6F5FA;
    padding: 12px 8px;

    &-content {
        height: calc(100vh - 24px);
        width: calc(100vw - 16px);
    }
}
</style>